<template>
  <div>
    <ace-editor
        v-model="code"
        :options="editorOptions"
        :lang="language"
        :theme="theme"
        width="100%"
        height="400px"
    ></ace-editor>
  </div>
</template>

<script>
import 'ace-builds/src-noconflict/mode-javascript' // 引入需要的语言模式
import 'ace-builds/src-noconflict/theme-monokai' // 引入需要的主题
import 'ace-builds/webpack-resolver'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'AceEditor2',
  components: {
    'ace-editor': () => import('vue2-ace-editor')
  },
  data() {
    return {
      code: `// Write your code here...`,
      language: 'javascript', // 设置语言
      theme: 'github', // 设置主题
      editorOptions: {
        useWorker: false // 解决 WebWorker 相关的报错
      }
    }
  }
})
// npm install --save-dev vue2-ace-editor
</script>
<style scoped>
/* 添加样式以更好地展示编辑器 */
</style>
